<template>
  <div class="p-3">
    <a-form>
      <a-form-item class="!mb-3">
        <a-button type="primary" @click="showCreateModal">新增</a-button>
      </a-form-item>
    </a-form>
    <a-table
      :bordered="true"
      :columns="columns"
      row-key="id"
      :data-source="tableData"
      :pagination="pagination"
      :loading="tableLoading"
      :scroll="{ x: true }"
    >
      <template #bodyCell="{ column, record }">
        <div v-if="column.key === 'oper'">
          <a-button class="mr-2 mb-2" type="primary" @click="showUpdateModal(record)">{{ t("common.edit") }}</a-button>
          <a-button class="mr-2 mb-2" danger type="primary" @click="deleteRecord(record)">
            {{ t("common.delete") }}
          </a-button>
          <a-button class="mr-2 mb-2" type="primary" @click="toggleLine(record)">
            {{ record.status ? t("common.doOffline") : t("common.doOnline") }}
          </a-button>
          <a-button @click="checkSignUpInfo(record)">查看报名信息</a-button>
        </div>
        <a-image v-else-if="column.key === 'activityUrl'" :src="record.activityUrl" :width="200" />
      </template>
    </a-table>
    <a-modal v-model:visible="modalVisible" :title="modalTitle" @ok="modalOk">
      <a-form :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
        <a-form-item label="活动名称" v-bind="validateInfos.activityName">
          <a-input v-model:value="modelRef.activityName" />
        </a-form-item>
        <a-form-item label="海报" v-bind="validateInfos.activityUrl">
          <CommonUpload v-model:fileUrl="modelRef.activityUrl" />
        </a-form-item>
        <a-form-item label="权重" v-bind="validateInfos.activityWeight">
          <a-input-number v-model:value="modelRef.activityWeight" :min="1" />
        </a-form-item>
        <a-form-item label="截止报名时间" v-bind="validateInfos.registrationDeadline">
          <a-date-picker v-model:value="modelRef.registrationDeadline" />
        </a-form-item>
        <a-form-item label="会员邀请名额数" v-bind="validateInfos.allowInvitees">
          <a-input-number v-model:value="modelRef.allowInvitees" :min="0" />
        </a-form-item>
      </a-form>
      <a-card title="报名字段">
        <div class="flex flex-row mb-2 items-center" v-for="(el, index) in modelRef.signUpList" :key="el.id">
          <div class="w-32">
            <a-input v-model:value="el.signUpField" placeholder="字段名称" @change="signUpErrMes = ''" />
          </div>
          <div class="px-3">
            <a-select :options="ActivityFieldType" v-model:value="el.signUpType" class="w-40" />
          </div>
          <div>
            <a-checkbox v-model:checked="el.required">必填</a-checkbox>
          </div>
          <div
            class="cursor-pointer text-red-500 text-xl flex-1 text-right"
            @click="removeField(index)"
            v-if="index > 1"
          >
            <CloseCircleOutlined />
          </div>
        </div>
        <div>
          <a-button type="primary" @click="addField">新增字段</a-button>
        </div>
      </a-card>
      <div v-show="signUpErrMes" class="text-red-500 mt-2">
        {{ signUpErrMes }}
      </div>
    </a-modal>
    <a-modal v-model:visible="showSignUpInfoModal" title="报名信息" :footer="null">
      <a-table
        :bordered="true"
        :columns="signUpInfoColumns"
        row-key="id"
        :data-source="signUpInfoData"
        :pagination="false"
        :loading="signUpInfoLoading"
      >
      </a-table>
    </a-modal>
  </div>
</template>
<script lang="ts" setup>
import { onMounted, reactive, ref } from "vue";
import { useI18n } from "/@/locales/useI18n";
import { Api, Activity, SignUpItem } from "/@/api/manage/officialContent";
import { CloseCircleOutlined } from "@ant-design/icons-vue";
import { useCURD } from "/@/hooks/web/useCURD";
import { ActivityFieldType } from "/@/base/data";
import CommonUpload from "/@/components/CommonUpload.vue";
import dayjs from "dayjs";
import { toggleLineByStatus } from "/@/components/business";
const { t } = useI18n();
const columns = [
  {
    title: "活动ID",
    dataIndex: "id",
  },
  {
    title: "活动名称",
    dataIndex: "activityName",
  },
  {
    title: "海报",
    dataIndex: "activityUrl",
    key: "activityUrl",
  },
  {
    title: "权重",
    dataIndex: "activityWeight",
  },
  {
    title: "状态",
    dataIndex: "status",
    customRender({ text }) {
      return text ? t("common.online") : t("common.offline");
    },
  },
  {
    title: "报名截止时间",
    dataIndex: "registrationDeadline",
    customRender({ text }) {
      return dayjs(text).format("YYYY-MM-DD");
    },
  },
  {
    title: "操作",
    dataIndex: "oper",
    key: "oper",
  },
];
function getDefaultFields() {
  return [
    {
      id: "0",
      required: true,
      signUpField: "您的姓名",
      signUpType: 0,
      sort: 0,
    },
    {
      id: "1",
      required: true,
      signUpField: "您的手机",
      signUpType: 1,
      sort: 0,
    },
  ];
}
const modelRef = reactive<Activity>({
  activityName: "",
  activityUrl: "",
  activityWeight: 1,
  registrationDeadline: dayjs(),
  allowInvitees: 0,
  signUpList: getDefaultFields(),
});
const {
  modalVisible,
  modalTitle,
  validateInfos,
  showCreateModal,
  showUpdateModal,
  modalOk,
  deleteRecord,
  pagination,
  tableLoading,
  tableData,
  reloadTable,
  curd,
} = useCURD<Activity, any>({
  isPagination: true,
  createTitle: "新增活动",
  updateTitle: "编辑活动",
  deleteMessage: "确认删除该活动吗？",
  modelRef,
  dateFields: ["registrationDeadline"],
  fieldRules: ["activityName", "activityUrl", "activityWeight", "registrationDeadline", "allowInvitees"],
  cudUrl: Api.activity,
  getPageUrl: Api.activity,
  onBeforeOk(data, isCreate) {
    if (isCreate) {
      data.status = 0;
    }
    const signUpList = data.signUpList as SignUpItem[];
    let isValid = true;
    signUpList.forEach((item) => {
      if (!item.signUpField) {
        signUpErrMes.value = "请输入字段名称";
        isValid = false;
        return false;
      }
      item.required = item.required ? 1 : 0;
    });
    if (!isValid) {
      return false;
    }
  },
  onBeforeShowModal(model?: Activity) {
    if (!model) return;
    (model.signUpList as SignUpItem[]).forEach((item) => {
      item.required = !!item.required;
    });
    if (!model.signUpList || model.signUpList.length === 0) {
      model.signUpList = getDefaultFields();
    }
  },
});
onMounted(async () => {
  await reloadTable();
});
function addField() {
  const list = modelRef.signUpList as SignUpItem[];
  list.push({
    id: list.length + "",
    required: false,
    signUpField: "",
    signUpType: 0,
    sort: 0,
  });
}
function removeField(index) {
  const list = modelRef.signUpList as SignUpItem[];
  list.splice(index, 1);
}
const signUpErrMes = ref("");
function toggleLine(record: Activity) {
  toggleLineByStatus({
    record,
    curd,
    reloadTable,
    tableLoading,
  });
}
function checkSignUpInfo() {
  showSignUpInfoModal.value = true;
}
const signUpInfoColumns = [
  { title: "用户ID", dataIndex: "id" },
  { title: "用户姓名", dataIndex: "name" },
  { title: "手机号", dataIndex: "cellphone" },
];
const showSignUpInfoModal = ref(false);
const signUpInfoData = ref([]);
const signUpInfoLoading = ref(false);
</script>
<style lang="less"></style>
